import dayjs from "dayjs";
// import { message } from "@/utils/message";
// import { ElMessageBox } from "element-plus";
import { type PaginationProps } from "@pureadmin/table";
import { reactive, ref, computed, onMounted } from "vue";
import axios from "axios";
import { CodeToText } from "@/utils/chinaArea";
export function useUser() {
  const dataList = ref([]);
  const loading = ref(true);
  // const switchLoadMap = ref({});
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
      label: "序号",
      type: "index",
      width: 70,
      hide: ({ checkList }) => !checkList.includes("序号列")
    },
    {
      label: "编号",
      prop: "id",
      minWidth: 130
    },
    {
      label: "用户名称",
      prop: "username",
      minWidth: 130
    },
    {
      label: "产品名称",
      prop: "product_name",
      minWidth: 130
    },
    // {
    //   label: "性别",
    //   prop: "sex",
    //   minWidth: 90,
    //   cellRenderer: ({ row, props }) => (
    //     <el-tag
    //       size={props.size}
    //       type={row.sex === 1 ? "danger" : ""}
    //       effect="plain"
    //     >
    //       {row.sex === 1 ? "女" : "男"}
    //     </el-tag>
    //   )
    // },//后面可以加上这一部分
    {
      label: "所属单位",
      prop: "company",
      minWidth: 90
      // formatter: ({ dept }) => dept.name
    },
    {
      label: "手机号码",
      prop: "phone",
      minWidth: 90
    },
    {
      label: "订单类型",
      prop: "order",
      minWidth: 90
    },
    // {
    //   label: "状态",
    //   prop: "status",
    //   minWidth: 90,
    //   cellRenderer: scope => (
    //     <el-switch
    //       size={scope.props.size === "small" ? "small" : "default"}
    //       loading={switchLoadMap.value[scope.index]?.loading}
    //       v-model={scope.row.status}
    //       active-value={1}
    //       inactive-value={0}
    //       active-text="已开启"
    //       inactive-text="已关闭"
    //       inline-prompt
    //       onChange={() => onChange(scope as any)}
    //     />
    //   )
    // },
    {
      label: "下单时间",
      minWidth: 90,
      prop: "created_at",
      formatter: ({ createTime }) =>
        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
    },
    {
      label: "操作",
      fixed: "right",
      width: 180,
      slot: "operation"
    }
  ];
  const buttonClass = computed(() => {
    return [
      "!h-[20px]",
      "reset-margin",
      "!text-gray-500",
      "dark:!text-white",
      "dark:hover:!text-primary"
    ];
  });

  // function onChange({ row, index }) {
  //   ElMessageBox.confirm(
  //     `确认要<strong>${
  //       row.status === 0 ? "停用" : "启用"
  //     }</strong><strong style='color:var(--el-color-primary)'>${
  //       row.username
  //     }</strong>用户吗?`,
  //     "系统提示",
  //     {
  //       confirmButtonText: "确定",
  //       cancelButtonText: "取消",
  //       type: "warning",
  //       dangerouslyUseHTMLString: true,
  //       draggable: true
  //     }
  //   )
  //     .then(() => {
  //       switchLoadMap.value[index] = Object.assign(
  //         {},
  //         switchLoadMap.value[index],
  //         {
  //           loading: true
  //         }
  //       );
  //       setTimeout(() => {
  //         switchLoadMap.value[index] = Object.assign(
  //           {},
  //           switchLoadMap.value[index],
  //           {
  //             loading: false
  //           }
  //         );
  //         message("已成功修改用户状态", {
  //           type: "success"
  //         });
  //       }, 300);
  //     })
  //     .catch(() => {
  //       row.status === 0 ? (row.status = 1) : (row.status = 0);
  //     });
  // }

  function handleUpdate(row) {
    console.log(row);
  }

  function handleDelete(row) {
    console.log(row);
  }

  function handleSizeChange(val: number) {
    console.log(`${val} items per page`);
  }

  function handleCurrentChange(val: number) {
    console.log(`current page: ${val}`);
  }

  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
  }
  interface UserInfo {
    username: string;
    roles: string[];
    expires: Date;
    refreshToken: string;
  }
  const username = ref<string>("");
  async function onSearch() {
    loading.value = true;
    // const { data } = await getUserList();
    const userInfo = sessionStorage.getItem("user-info");
    if (userInfo) {
      const { username: u } = JSON.parse(userInfo) as UserInfo;
      if (u) {
        username.value = u;
      }
    }
    const response = await axios.get("/api/orders/", {
      params: {
        name: username.value
      }
    });
    // console.log(response);
    // dataList.value = data.list;
    // pagination.total = data.total;
    dataList.value = response.data.map(item => {
      return {
        id: item.id,
        username: item.name,
        order: item.order,
        name: item.name,
        company: item.company,
        address:
          CodeToText[item.province_id] +
          CodeToText[item.city_id] +
          CodeToText[item.district_id],
        created_at: item.created_at,
        product_name: item.product_name
      };
    });
    pagination.total = response.data.length;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

  // const resetForm = formEl => {
  //   if (!formEl) return;
  //   formEl.resetFields();
  //   onSearch();
  // };

  onMounted(() => {
    onSearch();
  });

  return {
    loading,
    columns,
    dataList,
    pagination,
    buttonClass,
    onSearch,
    handleUpdate,
    handleDelete,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange
  };
}
